<style scoped>
</style>

<template>
	<div class="vue-box">
		<div class="c-panel">
			<!-- 参数栏 -->
			<el-form :inline="true" size="mini">
				<el-form-item label="车位地址：">
					<el-input v-model="p.address" placeholder="模糊查询"></el-input>
				</el-form-item>
				<el-form-item style="min-width: 10px;">
					<el-button type="primary" icon="el-icon-search" @click="f5">查询</el-button>
				</el-form-item>
				<br>
			</el-form>
			<!-- 数据列表 -->
			<!-- <h4 class="c-title">列表</h4> -->
			<el-table class="data-table" :data="dataList" size="mini">
				<el-table-column label="订单编号" prop="order.orderid" width="150px"> </el-table-column>
				<el-table-column label="车位地址" prop="parkingInformation.parkingAddress" width="220px"></el-table-column>
				<el-table-column label="车牌号" prop="car.plateNumber" ></el-table-column>
				<el-table-column label="开始时间" prop="order.creatTime" width="190px"></el-table-column>
				<el-table-column label="结束时间" prop="order.endTime" width="190px"></el-table-column>
				<el-table-column label="租用时间(小时)" prop="order.time" width="100px"></el-table-column>
				<el-table-column label="共计(元)" prop="order.price"></el-table-column>
				<el-table-column label="状态" prop="order.status">
					<template slot-scope="scope">
						<span v-show="scope.row.order.status == 0">未付款</span>
						<span v-show="scope.row.order.status == 1">已付款</span>
						<span v-show="scope.row.order.status == 2">异常</span>
					</template>
				</el-table-column>
				<el-table-column prop="order.status" label="操作" width="150px">
					<template slot-scope="s" >
						<el-button class="c-btn" v-show="s.row.order.status == 0" type="primary" icon="el-icon-edit"  @click="gobuy(s.row)">去支付</el-button>
						<el-button class="c-btn" v-show="s.row.order.status == 0" type="danger" icon="el-icon-delete" @click="del(s.row,1)">取消订单</el-button>
						<el-button class="c-btn" v-show="s.row.order.status == 1" type="danger" icon="el-icon-delete" @click="del(s.row,2)">删除订单</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="page-box">
				<el-pagination background
					layout="total, prev, pager, next, sizes, jumper" 
					:current-page.sync="p.pageNo" 
					:page-size.sync="p.pageSize" 
					:total="page.total" 
					:page-sizes="[1, 10, 20, 30, 40, 50, 100]" 
					@current-change="f5(true)" 
					@size-change="f5(true)">
				</el-pagination>
			</div>
		</div>
					
		<!-- 增改组件 -->
		<add-or-update ref="add-or-update"></add-or-update>
	</div>
</template>

<script>
	// import mockData from './data-list.js';
	import addOrUpdate from './art-add.vue';
	export default {
		components: {
			addOrUpdate
		},
        props: ['params'],
		data() {
			return {
                uid: localStorage.getItem("uid"),
				p: { // 查询参数
					address: '',
					sort_type: 0,
					pageNo: 1,
					pageSize: 10,
				},
				page: {
					total: null,
				},
				dataCount: 0,	// 数据总数 
				dataList: []
			}
		},
		methods: {
			// 数据刷新
			f5: function() {
				this.sa.ajax('/e-renter/order/getOrder',{uid:this.uid,pageNo:this.p.pageNo,pageSize:this.p.pageSize,address:this.p.address}, function(res){
					// this.dataList = res.data;	// 数据
					// this.dataCount = res.dataCount;		// 分页 
					this.dataList = res.data;
					this.page = this.dataList[0].orderPage;
				}.bind(this), 
				{"type":"post"});
			},
			gobuy: function(data) {
				this.sa.ajax('/e-renter/order/buyforOrder',{uid:this.uid,orderid:data.order.orderid,price:data.order.price}, function(res){
					if(res.data){
						this.f5(true);
						this.sa.ok("支付成功")
					}else {
            this.sa.error("余额不足,请前往充值")
          }
					console.log(res)
				}.bind(this), 
				{"type":"post"});
			},
			// 删除
			del: function(data,num) {
				this.sa.confirm(num == 1? '是否取消，此操作不可逆':'是否删除，此操作不可撤销', function() {
					this.sa.ajax('/e-renter/order/delOrder',{orderid:data.order.orderid}, function(res) {
						if(res.data){
							this.sa.ok(num == 1? '取消成功':'删除成功');
							this.f5();
						}else{
							this.sa.error("出现异常")
						}

					}.bind(this)),
					{"type":"post"}
				}.bind(this));
			},
            test() {
                alert(this.uid)
            }
		},
		created: function() {
			this.f5();
		}
	}
</script>
